<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ice="http://www.icesoft.com/icefaces/component"
      xmlns:ace="http://www.icefaces.org/icefaces/components"
      >
   <h:head>
      <meta charset="UTF-8" />
      <link rel="stylesheet" type="text/css" href="./assets/css/default.css"></link>
      
      <script type="text/javascript" src="./assets/js/jquery-1.8.2.js"></script>
      <script type="text/javascript" src="./assets/js/jquery.simplemodal.1.4.3.min.js"></script>
      <script type="text/javascript" src="./assets/js/netviz.js"></script>
      <title>NetVisualizer</title>
   </h:head>
   <h:body>
       <header>
            <div id="logo">
               <h1>NetVisualizer</h1>
            </div>
            <!-- TODO
                  CSS anpassen
                  UserAdministration.login aufrufen, bisher nur ausgabe in der Konsole
                  page reload verhindern
            -->
            <div id="loginWidget" class="loginWidget">
               <div id="loginForm" class="loginForm">
                  <h:form>
                     <ice:inputText id="nameLoginInput" required="true" value="#{loginInformationBean.name}" />
                     <ice:message for="nameLoginInput" />
                     
                     <ice:inputSecret id="pwLoginInput" required="true" value="#{loginInformationBean.password}" />
                     <ice:message for="pwLoginInput" />
                     
                     <ace:pushButton id="submitLogin" value="Anmelden" actionListener="#{loginInformationBean.login}" />
                     
                     <h:link value="Passwort vergessen?"></h:link>
                     <h:outputLink onclick="registrationDialog.show(); return false;">Registrieren</h:outputLink>
                  </h:form>
               </div>
            </div>
           <!-- TODO
                  CSS anpassen
                  Verarbeitung der eingegebenen Informationen
           -->
           <ace:dialog modal="true" closable="true" closeOnEscape="true" resizable="false"
                        visible="false" height="350" width="350" widgetVar="registrationDialog">
               <ice:panelGrid columns="2" width="100%">
                  <ice:outputLabel id="name" for="nameInputField" value="Benutzername:"/>
                  <ice:inputText id="nameInputField" value="#{loginInformationBean.name}" />

                  <ice:outputLabel id="passwordLabel" for="passwordInputField" value="Passwort:"/>
                  <ice:inputText id="passwordInputField" value="#{loginInformationBean.password}" />
               </ice:panelGrid>
               
               <h:panelGrid width="100%" style="text-align: center;">
                  <h:commandButton value="Registrieren" onclick="registrationDialog.hide();"/>
                  <h:commandButton value="Abbrechen" onclick="registrationDialog.hide();"/>
               </h:panelGrid>
            </ace:dialog>
         </header>
         <!-- TODO Tooltip ist keine gute Lösung, alternative suchen -->
         <div id="tooltip test">
         <h:form id="menuWrapper">
            <ace:menuBar>
               <ace:menuItem id="HALLO" value="Trace Route"></ace:menuItem>
               <ace:menuItem value="Trace Site"></ace:menuItem>
               <ace:menuItem value="Show Shark Trace"></ace:menuItem>
               <ace:menuItem value="My Saved Traces"></ace:menuItem>
               <ace:menuItem value="My Account"></ace:menuItem>
            </ace:menuBar>
            <ace:tooltip forContainer="HALLO" speechBubble="false" position="topLeft" targetPosition="bottomLeft" hideDelay="1000" >
               <h:inputText value="#{traceRouteBean.ip}" maxlength="100" label="Adresse: " style="width: 300px; height:50px;"></h:inputText>
               <!-- TODO IP-Parameter übermitteln -->
               <h:commandButton value="Trace!" onclick="traceMe();"/>
            </ace:tooltip>
         </h:form>
         </div>
      <div class="wrapper">
         <div id="content" class="content">
            <ace:gMap address="Berlin, Germany" zoomLevel="11"/>
            <div class="push"></div>
         </div>
      </div>
      <footer>
         <p class="centeredText">&#169;Bruno Kirschner &#38; Marius Hentschel - 2012<br />
            Projekt im Rahmen des Moduls Multimedia-Engineering II an der Beuth-Hochschule f&#252;r Technik Berlin, WS 2012/13
         </p>
      </footer>
   </h:body>
</html>


